<template>
    <div>
        <Header></Header>
        <div class="a" >
        <router-link to="/archives">archives &nbsp</router-link>
        <router-link to="/categories">categories &nbsp</router-link>
        <router-link to="/tags">tags &nbsp</router-link>
        <router-link to="/index">index</router-link>
        </div>

        <el-row type="flex" justify="center" class="">
            <el-col :sapn="1" class="" style="width:70%">
                <div class="">
                    <el-timeline>
                        <el-timeline-item
                            placement="top"
                            v-for="(activity, index) in activities"
                            :key="index"
                            icon="el-icon-more"
                            type="success"
                            color="#fac002"
                            size="large"
                            :timestamp="activity.created"
                        >
                            <el-card>
                                <h4>
                                    <router-link
                                        :to="{name:'BlogDetail',params:{articleId:activity.articleId}}"
                                    >{{activity.title}}</router-link>
                                </h4>
                                <p>ZJB</p>
                            </el-card>
                        </el-timeline-item>
                    </el-timeline>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import Header from './component/Header';
import { Timeline, TimelineItem, TimelineTitle } from 'vue-cute-timeline';

export default {
    name: 'Archives',
    components: { Header, Timeline, TimelineItem, TimelineTitle },
    data() {
        return {
            activities: []
        };
    },
    methods: {
        getArchives() {
            const _this = this;
            this.$axios.get('http://39.106.115.234:8083/article/archives').then((res) => {
                // console.log(res.data.data)
                _this.activities = res.data.data;
            });
        }
    },
    created() {
        this.getArchives();
    },
    watch: {
        $route(newValue, oldValue) {
            this.getArchives();
        }
    }
};
</script>

<style scoped>

.a{
    margin:20px;
    border-width:2px;
    border-color:"#ff00ff";
    background:#fac002;
}
.b{
    margin:20px;
    border-width:2px;
    border-color:"#ff00ff";
    background:#9eafaf;
    opacity:0.3;

}
</style>
